<template>
	<div class="meterial">
		
		<div style="padding:20px 0;">
			<!--采样容器：{{ItemName}}-->
			<span style="padding:5px">推荐容器：</b>{{caiyangData}}</span>
			<!--<p style="color:blue;padding:5px"><b>推荐容器:</b>{{caiyangData}}</p>-->
			<div style="float:right;margin-top: -4px;" v-if="['查看模板','模板审核','任务详情','任务签发'].indexOf(title)<0">
				<el-button type="primary" size="mini" :disabled="addDisable" @click="addone">添加容器</el-button>
			</div>
		</div>
		<!--<p style="color:blue;padding:5px"><b>推荐容器:</b>{{caiyangData}}</p>-->
		<el-table size="mini" highlight-current-row :data="materialList"  :height="tableHeightC" style="width: 100%">
			<el-table-column prop="rongqileixing" label="容器材质" min-width="180">
				<template slot-scope="scope">
					<el-select v-model="scope.row.bottleType" placeholder="请选择" @change='bottleChange(scope.row)' size="mini" :disabled = "!(['查看模板','模板审核','任务详情','任务签发'].indexOf(title)<0)" >
						<el-option v-for="item in bottleOptions" :key="item.id" :label="item.name" :value="item.id">
						</el-option>
					</el-select>
				</template>
			</el-table-column>
			<el-table-column prop="rongqileixing" label="容器容量(ml)" min-width="180">
				<template slot-scope="scope">
					<el-input-number v-model="scope.row.capacity" :step="100" :min="0" size="mini" :disabled = "!(['查看模板','模板审核','任务详情','任务签发'].indexOf(title)<0)"></el-input-number>
				</template>
			</el-table-column>
			<el-table-column prop="pingshu" label="采样瓶数" min-width="180">
				<template slot-scope="scope">
					<el-input-number v-model="scope.row.number" :min="1" :max="10" size="mini" :disabled = "!(['查看模板','模板审核','任务详情','任务签发'].indexOf(title)<0)"></el-input-number>
				</template>
			</el-table-column>
			<el-table-column label="操作" fixed="right" :key="Math.random()" v-if="['查看模板','模板审核','任务详情','任务签发'].indexOf(title)<0" min-width="100">
				<template slot-scope="scope">
					<el-button type="text" size="mini" @click="deleteone(scope.$index)">删除</el-button>
				</template>
			</el-table-column>
		</el-table>
	</div>
</template>

<script>
	import { mapState } from 'vuex'
	export default {
		props: ['title','getPlanData'],
		data() {
			return {
				ItemName: '',
				capacityVisible: false,
				bottleData: {
					bottleType: '',
					bottleName: '',
					capacity: 0
				},
				caiyangData: '',
				materialList: [],
				addDisable: true,
				rongqirongliang: [
					{
						value: '200',
						label: '200'
					},
					{
						value: '500',
						label: '500'
					},
					{
						value: '1000',
						label: '1000'
					},
					{
						value: '2000',
						label: '2000'
					}
				],

			}
		},
		computed: {
			
			...mapState(['bottleType', 'bottleOptions', 'tableHeightC']),
		},
		created() {
			console.log(this.getPlanData)
			this.$root.eventHub.$on("sample2brother", passData => {
				
				if(passData.detailBeans  == undefined){
					 passData.detailBeans = [];
					this.materialList = passData.detailBeans;
				}else{
					this.materialList = passData.detailBeans;
				}
				
				this.caiyangData = passData.bottle;
				this.ItemName = passData.name
				this.addDisable = false;
			})
		},
		mounted() {
			console.log(this.getPlanData)
			this.$store.dispatch("getAllBottles");
		},
		methods: {
			bottleChange(row) {
				console.log(row)
				let filterArr = [];
				filterArr = this.bottleOptions.filter(item => item.id == row.bottleType)
				row.bottleName = filterArr[0].name
			},
			showInput() {
				this.capacityVisible = true;
				this.bottleData = {
					bottleType: '',
					bottleName: '',
					capacity: 0
				}
			},
			yes() {
				this.capacityVisible = false;
				this.caiyangData.push(this.bottleData);
			},
			handleClose(tag) {
				this.caiyangData.splice(this.caiyangData.indexOf(tag), 1);
			},
			//  addBottle移入方法
			addone() {
				this.materialList.push({
					bottleType: '',
					capacity: 100,
					number: null
				})
			},
			deleteone(index) {
				this.materialList.splice(index, 1);
			}
		}
	}

</script>

<style>
	.el-tag+.el-tag {
		margin-left: 10px;
	}

	.button-new-tag {
		margin-left: 10px;
		height: 32px;
		line-height: 30px;
		padding-top: 0;
		padding-bottom: 0;
	}
</style>